<template>
    <TabGrayEasyCard v-if="isShow" :title="'资本化改造'" :isMore="false" @onMore="goDetail(props.permi)" :tabs="card.tabs" :curTab="card.curTab"
        :tabRight="card.tabRight" @onChange="changeTab" :grayCardList="card.grayCardList" :lineText="''" :barText="''"
        :unitText="`${jointUnitText}`" :updateText="card.updateText"
        v-btnPermi="{ permi: props.permi, noReport: true, isHiden: true, hideList: props.hideList }">
        <slot>
            <el-table :data="card.tableData" height="100%">
                <el-table-column prop="periodName" :label="card.curTab == '计划' ? '事项' : '科目'" :align="'left'" min-width="130"/>
                <el-table-column :label="card.curTab == '计划' ? '里程碑' : '目标'" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.nodeName) }}
                    </template>
                </el-table-column>
                <el-table-column :label="card.curTab == '计划' ? '计划完成' : '动态'" :align="'right'">
                    <template #default="scope">
                        {{ toThousands(scope.row.endDatePlan) }}
                    </template>
                </el-table-column>
                <el-table-column :label="card.curTab == '计划' ? '延期天数' : '超标率'" :align="'right'">
                    <template #default="scope">
                        <span
                            :class="{ 'zs-text-red': scope.row.colorLab == '1', 'zs-text-orange': scope.row.colorLab == '2' }">{{
                                scope.row.extendDay }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </slot>
    </TabGrayEasyCard>
</template>

<script setup>
import TabGrayEasyCard from '@/DbComponents/tabGrayEasyCard'
import { toThousands } from '@/utils/number-util'
import dashBoardApi from '@/api/Manage/Business/dashBoard'
import { ref, reactive, watch, computed } from 'vue'
import { reportLog } from '@/utils/reportLog'

const props = defineProps({
    permi: {
        type: String,
        required: false,
        default: ''
    },
    hideList: {
        type: Array,
        required: false,
    },
    biProjectCode: {
        type: String,
        required: false,
        default: ''
    },
    updateDate: {
        type: String,
        required: false,
        default: ''
    }
})
const card = reactive(
    {
        tabs: [{ label: '计划', value: '计划' }, { label: '成本', value: '成本' }],
        curTab: '计划',
        tabRight: '',
        grayCardList: [{ label: '应完成', value: '', unit: '个', color: '' }, { label: '完成率', value: '', unit: '%', color: '' }, { label: '延期数', value: '', unit: '个', color: '' }],
        unitText: '',
        updateText: '',
        tableData: [],
        // startDate: '',
        // endDate: '',
    }
)
const jointUnitText = ref('')  //拼接的单位
const getCardData = () => {
    dashBoardApi.queryCipCardApi({ biProjectCode: props.biProjectCode, dataTime: props.updateDate, dataType: card.curTab }).then((res) => {
        if (res.data.code == 200) {
            card.tabRight = `截至 ${res.data.data.timeLab}`
            card.grayCardList[0].value = res.data.data.planCount ? toThousands(res.data.data.planCount) : '-'
            card.grayCardList[1].value = res.data.data.rate ? toThousands(res.data.data.rate) : '-'
            card.grayCardList[2].value = res.data.data.projectMilepostDelay ? toThousands(res.data.data.projectMilepostDelay) : '-'
            card.grayCardList[2].color = res.data.data.colorLab ? res.data.data.colorLab : '0'
            card.unitText =  res.data.data.valueUnit
            if (card.curTab == '计划') {
                jointUnitText.value  = '单位：' + card.unitText
            }
        }
    }).catch(err => {
        console.log(err)
    });
}
const getChartData = () => {
    dashBoardApi.queryCipFormApi({ biProjectCode: props.biProjectCode, dataTime: props.updateDate, dataType: card.curTab }).then((res) => {
        if (res.data.code == 200) {
            card.tableData = res.data.data
        }
    }).catch(err => {
        console.log(err)
    });
}

const goDetail = (permi) => {
    reportLog({
        type: 4,
        resourceKey: permi,
    })
}
const changeTab = (value) => {
    // 切换tab，更换开始和结束日期
    if (value == '计划') {
        card.grayCardList[0].value = '-'
        card.grayCardList[0].label = '应完成'
        card.grayCardList[0].unit = '个'
        card.grayCardList[1].value = '-'
        card.grayCardList[1].label = '完成率'
        card.grayCardList[1].unit = '%'
        card.grayCardList[2].value = '-'
        card.grayCardList[2].label = '延期数'
        card.grayCardList[2].unit = '个'

        jointUnitText.value  = '单位：' + card.unitText
    }
    if (value == '成本') {
        card.grayCardList[0].value = '-'
        card.grayCardList[0].label = '目标成本'
        card.grayCardList[0].unit = '万'
        card.grayCardList[1].value = '-'
        card.grayCardList[1].label = '动态成本'
        card.grayCardList[1].unit = '万'
        card.grayCardList[2].value = '-'
        card.grayCardList[2].label = '超标率'
        card.grayCardList[2].unit = '%'
        // 选择成本 不显示表格下面的单位
        jointUnitText.value  = ''
    }
    card.curTab = value

    getCardData()
    getChartData()
}

let isShow = ref(false)
const getShow = async () => {
    await dashBoardApi.queryCipLabApi({ biProjectCode: props.biProjectCode }).then((res) => {
        if (res.data.code == 200) {
            isShow.value = res.data.data == 1 ? true : false
        }
    }).catch(err => {
        console.log(err)
    });
}
const init = async () => {
    await getShow()
    if (isShow.value == true) {
        getCardData()
        getChartData()
    }
}
init()

const biProjectCode = computed(() => {
    return props.biProjectCode
});
watch(biProjectCode, () => {
    init()
}, { deep: true });
</script>

<style scoped lang="scss"></style>
